<template>
  <div class="demo">
    <div class="container">
      <XScroll>
        <div class="card-list">
          <div class="card">
            <img src="https://picsum.photos/id/53/700/500" alt="" />
          </div>
          <div class="card">
            <img src="https://picsum.photos/id/55/700/500" alt="" />
          </div>
          <div class="card">
            <img src="https://picsum.photos/id/56/700/500" alt="" />
          </div>
          <div class="card">
            <img src="https://picsum.photos/id/57/700/500" alt="" />
          </div>
          <div class="card">
            <img src="https://picsum.photos/id/58/700/500" alt="" />
          </div>
        </div>
      </XScroll>
    </div>
  </div>
</template>

<script setup>
import XScroll from "./XScroll.vue";
</script>

<style lang="scss" scoped>
.demo {
  width:100vw;
  height: 500px;
  // 会产生20px的margin穿透问题,解决办法就是父级加overflow: hidden
  // margin: 20px auto auto auto;
  margin: 0 auto;
  position: relative;
}
.container {
  width: 100%;
  height: 100%;
}
.card-list {
  display: flex;
  flex-wrap: nowrap;
  .card {
    width: 100vw;
    height: 500px;
    flex-shrink: 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
